const hua = Vue.extend({
  template: `<div>
    <el-button
          size="mini">新增</el-button>
          <el-button
          size="mini">查询</el-button>
<el-table
      :data="tableData"
      :row-class-name="tableRowClassName"
      style="width: 100%">
      <el-table-column
        prop="anim_bianhao"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="anim_name"
        label="动画名字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="anim_picurl"
        label="动画头像"
        width="180">
      </el-table-column>
      <el-table-column
        prop="anim_jieshao"
        label="简介"
        width="180">
      </el-table-column>
      <el-table-column
        prop="anim_vedio_url"
        label="播放地址"
        width="180">
      </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini" @click="update(scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div>
    <div class="block">
    <span class="demonstration">调整每页显示条数</span>
    <el-pagination
    v-if="search.total>0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage2"
      :page-sizes="[5, 10]"
      :page-size="5"
      layout="sizes, prev, pager, next"
      :total="search.total">
    </el-pagination>
  </div>
    </div>
    <cDialog v-model="visible">
    <el-form :model="form">
    <el-form-item label="动画名字" :label-width="formLabelWidth">
      <el-input v-model="form.anim_name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="动画头像" :label-width="formLabelWidth">
      <el-input v-model="form.anim_picurl" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="简介" :label-width="formLabelWidth">
      <el-input type="textarea" v-model="form.anim_jieshao" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="播放地址" :label-width="formLabelWidth">
      <el-input v-model="form.anim_vedio_url" autocomplete="off"></el-input>
    </el-form-item>
    </el-form></cDialog>
</div>`,
  data() {
    return {
      tableData: [
        {
          anim_bianhao: "2",
          anim_name: "皮卡丘",
          anim_picurl: "皮卡丘.jpg",
          anim_jieshao:
            "原本应该开开心心地享受圣诞派对的小智，却因为忘了买最最重要的圣诞蛋糕，不得已只好...",
          anim_vedio_url: "皮卡丘.mp4",
        },
      ],
      visible: false,
      form: {
        anim_bianhao: "2",
        anim_name: "皮卡丘",
        anim_picurl: "皮卡丘.jpg",
        anim_jieshao:
          "原本应该开开心心地享受圣诞派对的小智，却因为忘了买最最重要的圣诞蛋糕，不得已只好...",
        anim_vedio_url: "皮卡丘.mp4",
      },
      search: {
        page: 1,
        size: 5,
        total: 0,
      },
      formLabelWidth: "120px",
      currentPage2: 1,
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    getUserList() {
      http({
        url: "/anim/getList",
        method: "get",
        params: {
          page: this.search.page,
          size: this.search.size,
        },
      }).then((res) => {
        this.tableData = res.data;
        this.search.total = res.total;
      });
    },
    update(row) {
      this.form = row;
      this.visible = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.search.size = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.search.page = val;
      this.getUserList();
    },
  },
  components: {
    cDialog: dialog,
  },
  created() {
    this.getUserList();
  },
});
